<template>
  <div>
    <el-dialog v-model="dialogVisible" title="比赛日程" width="35%" :before-close="handleClose" :close-on-click-modal="false"
      :destroy-on-close="true">
      <el-scrollbar style="height: 500px;max-height: 500px;">
        <div class="fk_timeline_wrap">
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in activities" :key="index" :type="activity.type"
            :color="activity.color" :timestamp="activity.startTime" placement="top">
            <el-card>
              <h4>{{ activity.matchName }}</h4>
              <p>起止时间：{{ activity.startTime }}-{{ activity.endTime }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline></div>
      </el-scrollbar>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, ref } from "vue";
import VueEvent from "utils/event.js";
import { GetScheduleList } from "network/getBaseInfoNum";
import { scheduleListRetu } from "modelUtils/returnModel";
export default {
  name: "",
  components: {},
  props: [],
  setup() {
    const state = reactive({
      dialogVisible: ref(false),
      activities: ref([]),
    });
    const handleClose = () => {
      state.dialogVisible = false;
    };
    onBeforeMount(() => { });
    onMounted(() => {
      VueEvent.on("showGameSchedule", async (data) => {
        // 获取场馆赛程
        // console.log(data.id)
        let scheduleList = await GetScheduleList({ VenuesCode: data.id });
        // console.log(scheduleList);
        let scheduleListFormat = scheduleListRetu(scheduleList)
        state.activities = scheduleListFormat
        // console.log(state.activities)
        state.dialogVisible = data.isShowGameSchedule;
      });
    });
    const refState = toRefs(state);
    return {
      ...refState,
      handleClose,
    };
  },
};
</script>
<style scoped>
.fk_timeline_wrap{
  padding: 10px;
}
</style>